<template>
  <div>
    <Navbar title="商品列表" />
    <div class="order-bar">
      <div @click="switchOrder(0)" :class="['order', 'sale', {active: orderStatus.order === 0}]">
        <span>销量</span>
      </div>
      <div @click="switchOrder(1)" :class="['order', 'price', { active: orderStatus.order === 1 }]">
        <span>价格</span>
        <div :class="['angle', 'up', {
          active: orderStatus.order === 1 && orderStatus.upDown === 0
        }]"></div>
        <div :class="['angle', 'down', {
          active: orderStatus.order === 1 && orderStatus.upDown === 1
        }]"></div>
      </div>
      <div @click="switchOrder(2)" :class="['order', 'new', { active: orderStatus.order === 2 }]">
        <span>新品</span>
      </div>
    </div>
    <div class="list-container">
      <div class="items">
        <div class="item" v-for="item in items" :key="item.id" @click="enterDetail(item.id)">
          <img :src="item.pic" alt="" class="item-img">
          <div class="item-info">
            <h5>{{ item.name }}</h5>
            <div class="item-action">
              <span class="price">￥{{ item.minPrice }}</span>
              <van-icon name="gouwuchetianjia" size="18" color="#0ED397" class-prefix="icon"></van-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="ItemLists">
import { reactive, ref, onMounted, computed } from 'vue';
import Navbar from '@c/Navbar.vue'
import { fetchItems } from '@a/index'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute();
const router = useRouter();

// 点击商品跳转详情页
const enterDetail = (id: number) => {
  router.push({
    path: '/detail',
    query: {
      id
    }
  })
}


// 控制 排序高亮 状态
const orderStatus = reactive({
  order: 0, // 按照什么进行排序 0 销量1价格2新品
  upDown: 0 // 0 升序 1 降序
})
// 请求排序 字段值
const fetchOrderText = computed(() => {
  let orderText = 'ordersDown'
  switch (orderStatus.order) {
    case 0:
      // 销量降序排序
      orderText = 'ordersDown'
      break;

    case 1:
      // 价格排序
      // 判断升序还是降序
      if (orderStatus.upDown === 0) {
        // 价格升序
        orderText = 'priceUp'
      } else {
        orderText = 'priceDown'
      }
      break;
    case 2:
      // 按照发布事件 降序排序
      orderText = 'addedDown'
      break;
    default:
      break;
  }
  return orderText
})

// 点击 改变排序规则
const switchOrder = (status: number) => {
  // status 按照什么排序 0 销量 1 价格 2 新品
  if (status !== 1) {
    // 按照销量或者 新品排序
    orderStatus.order = status
  } else {
    // 按照价格排序

    // 此时不是按照价格排序 切换到价格排序 （默认按照价格升序）
    if (orderStatus.order !== 1) {
      orderStatus.order = 1
      orderStatus.upDown = 0
    } else {
      // 还是按照价格排序 切换升序还是降序
      if (orderStatus.upDown === 0) {
        orderStatus.upDown = 1
      } else {
        orderStatus.upDown = 0
      }
    }
  }
  getItems()
}


// 商品列表数据
const items = ref<any[]>([])

const getItems = () => {
  fetchItems({
    categoryId: route.query.cateId,
    orderBy: fetchOrderText.value
  }).then(res => {
    if (res.data.code === 0) {
      items.value = res.data.data.result
    }

  })
}

onMounted(() => {
  getItems()
})
</script>

<style scoped lang="scss">
.list-container{
  padding-top:86px;
  .items{
  .title{
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    background-color: #f9f6f6;
  }
  .item{
    display: flex;
    padding: 0 8px;
    margin-top: 5px;
    &-img{
      width: 4rem;
    }
    &-info{
      flex: 1;
      padding-left: 8px;
      
      h5{
        font-size: 14px;
        line-height: 30px;
      }
     .item-action{
      display: flex;
      justify-content: space-between;
      .price {
        font-size: 18px;
        color: #0ED397;
      }
     } 
    }
  }
}
}
.order-bar {
  height: 40px;
  background-color: #fafafa;
  position: fixed;
  width: 100%;
  left: 0;
  top: 46px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 1000;
  .order {
    &.active {
      color: #0ED397;
    }

    &.price {
      position: relative;

      .angle {
        width: 0;
        height: 0;
        border: 5px solid transparent;
        position: absolute;
        right: -11px;

        &.up {
          border-bottom-color: #333;
          top: -3px;

          &.active {
            border-bottom-color: #0ED397;
          }
        }

        &.down {
          border-top-color: #333;
          bottom: -5px;

          &.active {
            border-top-color: #0ED397;
          }
        }
      }
    }
  }
}
</style>